<template>
  <IFexHeaderMain>
    <template #header>
      <IHeader>订单管理 </IHeader>
      <div class="segmented-with-icon-container">
        <uni-segmented-control :current="currentIndex" :values="tabs.map((item) => item.text)" @clickItem="onTabClick" styleType="text" class="segmented-control" />
        <uni-icons type="calendar" size="22" :color="currentIndex == 4 ? '#2979FF' : '#000'" class="calendar-icon" @click="searchFun" />
      </div>
    </template>

    <view class="order-list-container wh_auto">
      <OrderRow :order="item" v-for="(item, index) in orderList" :key="index" @init="selectDataLisFun"></OrderRow>
      <view class="wrapper whov" v-if="orderList.length === 0">
        <text class="empty-text">暂无订单记录</text>
      </view>
      <uni-calendar ref="calendarRef" :insert="false" range @confirm="confirmFun" />
    </view>

    <template #footer>
      <ITabBarManager :index="-1" />
    </template>
  </IFexHeaderMain>
</template>

<script setup lang="ts">
  import ITabBarManager from '@/components/container/ITabBarManager.vue'
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import OrderRow from './components/OrderRow.vue'
  import { onMounted, ref, computed } from 'vue'
  import useUserInfoStore from '@/store/userInfo'
  import useToastMsg from '@/hooks/sysMsg'
  import { getUserStorageList } from '@/api/zmanager/order'
  const toastMsg = useToastMsg()
  const orderList = ref<any[]>([])
  const currentIndex = ref(0)
  const calendarRef = ref()
  const time = ref<any[]>([])
  const userInfoStore = useUserInfoStore()
  const tabs = ref([
    { value: '1', text: '今日' },
    { value: '2', text: '本周' },
    { value: '3', text: '本月' },
    { value: '4', text: '上月' },
  ])
  const userInfo = computed(() => userInfoStore.getUserInfo)
  onMounted(async () => selectDataLisFun())
  const onTabClick = async (e?: any) => {
    currentIndex.value = e ? e.currentIndex : 0
    if (currentIndex.value == 4) {
      calendarRef.value.open()
    } else {
      selectDataLisFun()
    }
  }
  const selectDataLisFun = async () => {
    toastMsg.showLoading()
    const result = await getUserStorageList(userInfo.value.userId, tabs.value[currentIndex.value] ? tabs.value[currentIndex.value].value : '5', time.value[0] || '', time.value[1] || '')
    if (result) {
      orderList.value = result.data
    }
    toastMsg.hideLoading()
  }
  const confirmFun = (e: any) => {
    time.value = [e.range.data[0], e.range.data[e.range.data.length - 1]]
    selectDataLisFun()
  }
  const searchFun = () => {
    currentIndex.value = 4
    calendarRef.value?.open()
  }
</script>
<style scoped>
  .order-list-container {
    padding: 20rpx;
    background-color: #f5f7fa;
    box-sizing: border-box;
  }

  .empty-text {
    font-size: 28rpx;
    color: #94a3b8;
    margin-top: 20rpx;
  }
  /* 关键：Flex 容器样式，控制左右布局 */
  .segmented-with-icon-container {
    display: flex; /* 开启Flex布局 */
    align-items: center; /* 垂直居中对齐（分段器和图标高度一致） */
    gap: 16rpx; /* 两个元素之间的间距，避免拥挤 */
    padding: 0 20rpx; /* 左右内边距，与页面其他元素对齐 */
  }

  /* 分段器样式：占满剩余空间，避免被图标挤压 */
  .segmented-control {
    flex: 1; /* 关键：让分段器占据容器剩余所有空间 */
    height: 60rpx; /* 固定高度，与图标视觉协调（可根据需求调整） */
  }

  /* 日历图标样式：固定大小，居右 */
  .calendar-icon {
    color: #36bffa; /* 图标颜色，与分段器激活色一致（可选） */
    cursor: pointer; /* 鼠标悬浮时显示“手”形，提示可点击 */
    padding: 8rpx; /* 增加点击区域，提升体验 */
    padding-bottom: 0;
  }

  /* 原有样式保持不变... */
  .order-list-container {
    padding: 20rpx;
    background-color: #f5f7fa;
    box-sizing: border-box;
  }

  .empty-text {
    font-size: 28rpx;
    color: #94a3b8;
    margin-top: 20rpx;
  }
</style>
